<template>
  <div class="home">
    <div class="turnClass">
      <div
        id="flipbook"
        @mouseover="handleMouseOver"
        @mouseleave="handleMouseLeave">
        <div
          v-for="item in imgUrl"
          :key="item.index"
          :style="`
            background:url(${item.imgurl}) no-repeat 100% 100%
            
            `"></div>
      </div>
    </div>
  </div>
</template>

<script>
import turn from "../utils/turn.js"

export default {
  name: "Home",
  data() {
    return {
      imgUrl: [
        { imgurl: require("./image/1.jpg"), index: 1 },
        { imgurl: require("./image/2.jpg"), index: 2 },
        { imgurl: require("./image/3.jpg"), index: 3 },
        { imgurl: require("./image/4.jpg"), index: 4 },
        { imgurl: require("./image/5.jpg"), index: 5 },
        { imgurl: require("./image/6.jpg"), index: 6 },
      ],
      timer: null,
    }
  },
  methods: {
    handleMouseOver() {
      clearInterval(this.timer)
    },
    handleMouseLeave() {
      this.timer = setInterval(() => {
        // if($("#flipbook").turn("pages")==$("#flipbook").turn("page")){
        //   $("#flipbook").turn("page",1)
        // }else{
        $("#flipbook").turn("next")

        if ($("#flipbook").turn("pages") == $("#flipbook").turn("page")) {
          let index = $("#flipbook").turn("page")
          console.log("index:", index)
          // $("#flipbook").turn('addpage',$("#flipbook")[0].children[$("#flipbook")[0].children.length-1],index+1)
          // console.log('$("#flipbook"):',$("#flipbook")[0].children);
          
          this.imgUrl.push({
            imgurl: require("./image/5.jpg"),
            index: index + 1,
          })
        }
        // }
      }, 3000)
    },
    onTurn() {
      this.$nextTick(() => {
        $("#flipbook").turn({
          acceleration: true, //是否启动硬件加速，移动端必须设置为true否则将不可使用
          display: "single",
          autoCenter: true,
          duration: 600,
          // pages:12,
          height: 646,
          width: 498,
        })
      })
      this.handleMouseLeave()
    },
  },
  mounted() {
    this.onTurn()
  },
}
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.home {
  width: 100vw;
  height: 100vh;
  background: #000;

  .turnClass {
    // background: #000;
    display: flex;
    margin: 0px auto;
    // width: 996px;
    width: 498px;

    height: 646px;
    padding: calc((100vh - 646px) / 2) 0;
    overflow: hidden;
  }
}
</style>
